﻿<div class="stack-panel-wrapper @Class @(IsVertial ? "column":"row") @VertialAlign @HorizontalAlign" style="--stack-panel-gap:@(Gap)px;@WrapStyle @Style">
	@ChildContent
</div>
@code {
	[Parameter] public string? Class { get; set; }
	[Parameter] public string? Style { get; set; }
	[Parameter, NotNull] public RenderFragment? ChildContent { get; set; }
	[Parameter] public int Gap { get; set; } = 10;
	[Parameter] public bool Wrap { get; set; }
	/// <summary>
	/// row / column
	/// </summary>
	[Parameter] public string Direction { get; set; } = "row";
	[Parameter] public bool IsVertial { get; set; }
	/// <summary>
	/// top / middle / bottom
	/// </summary>
	[Parameter] public string VertialAlign { get; set; } = "middle";
	/// <summary>
	/// left / center / right
	/// </summary>
	[Parameter] public string HorizontalAlign { get; set; } = "left";
	private string WrapStyle => Wrap ? "flex-wrap: wrap;" : "";
}
